import lessModule from "./index.module.less"


// 主页-全景监控页面-浮层组件-站点弹窗组件-隔直卡片
interface componentInterface {
    cardRowList: Array<Array<object>>
    sourceData: object
}
const HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent_StraightCardComponent: React.FC<componentInterface> = (props) => {

    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponentStraightCardComponent"]}>
            {
                props.cardRowList.map((item, idx) => (
                    <div key={`card${idx}`} className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponentStraightCardComponent-card"]}>
                        {
                            item.map((rowItem, rowIdx) => (
                                <div key={`${idx}row${rowIdx}`} className={lessModule["homePagePanoramicMonitoringPageLayerComponentStationModalComponentStraightCardComponent-card__row"]} style={{ backgroundColor: rowIdx % 2 ? "rgba(0, 0, 0, 0.02)" : "#FFFFFF" }}>
                                    <span>{rowItem["label"]}</span>
                                    <span className={lessModule["card-row__value"]} >{props.sourceData[rowItem["key"]]??"-"}{ props.sourceData[rowItem["key"]] && rowItem["unit"] ? rowItem["unit"]:""}</span>
                                </div>
                            ))
                        }
                    </div>
                ))
            }
        </div>
    )
}



export default HomePage_PanoramicMonitoringPage_LayerComponent_StationModalComponent_StraightCardComponent